<template>
	<view class="comment-item-container">
		<view class="avatar-box">
			<image class="avatar" :src="data.avatar" />
		</view>
		<view class="info-box">
			<text class="comment-user">{{data.nickName || data.userName}}</text>
			<text class="comment-info">{{data.content}}</text>
			<text class='comment-time'>{{data.postTime | relativeTime}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"article-comment-item",
		props:{
			data:{
				type: Object,
				required: true
			}			
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
.comment-item-container {
  padding: $uni-spacing-col-lg 0;
  display: flex;
  .info-box {
    margin-left: $uni-spacing-row-sm;
    display: flex;
    flex-direction: column;
    .comment-user {
      font-size: $uni-font-size-sm;
      font-weight: bolder;
      color: $uni-text-color;
    }
    .comment-info {
      margin-top: $uni-spacing-col-sm;
      font-size: $uni-font-size-base;
      color: $uni-text-color;
    }
    .comment-time {
      margin-top: $uni-spacing-col-sm;
      font-size: $uni-font-size-sm;
      color: $uni-text-color-grey;
    }
  }
}
</style>